import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';

import Swiper5Text1 from '@/assets/text-3.png';
import Swiper5Text2 from '@/assets/text-4.png';

import Bg5 from '@/assets/bg-5.jpg';

export default function End() {
  return (
    <>
      <XyzTransitionGroup
        duration="auto"
        appear
        appearVisible
        xyz="fade down-100% stagger-2 delay-3"
        className="flex flex-col items-center h-[1000px] bg-no-repeat bg-cover pt-[100px]"
        style={{
          backgroundImage: `url(${Bg5})`,
        }}
      >
        <p
          className="w-[438px] h-[44px] bg-cover bg-no-repeat"
          style={{
            backgroundImage: `url(${Swiper5Text1})`,
          }}
        ></p>
        <p
          className="w-[282px] h-[124px] bg-cover bg-no-repeat mt-6"
          style={{
            backgroundImage: `url(${Swiper5Text2})`,
          }}
        ></p>
      </XyzTransitionGroup>
    </>
  );
}
